import PubSub from "pubsub-js"
import "./Footer.css"
export default function Footer(props) {
  const { list } = props
  const isDoneList = list.filter((item) => item.isDone)
  const doneTotal = isDoneList.length
  const total = list.length

  function handle(e) {
    PubSub.publish("allIsDone", e.target.checked)
  }

  function deleteIsDone() {
    const unDoneList = list.filter((item) => !item.isDone)
    PubSub.publish("deleteIsDone", unDoneList)
  }

  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          checked={doneTotal === total}
          onChange={handle}
        />
      </label>
      <span>
        <span>已完成{doneTotal}</span> / 全部{total}
      </span>
      <button className="btn btn-danger" onClick={deleteIsDone}>
        清除已完成任务
      </button>
    </div>
  )
}
